<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习页面</title>
    <!--引入vue-->
    <script type="application/javascript" src="../js/vue.js"></script>



</head>
<body>
<div id="app">
    <h1>{{title}}</h1>
    <!--    -->
    <h1 v-text="text"></h1>
    <!-- 使用v-on   -->
    <button v-on:click="fun01">按钮01</button>
    <!--  Ctrl+d  -->
    <button @click="fun02">按钮01</button>
    <br/>
    <ul>
        <li v-for="(item,index) in items">{{item}}</li>
    </ul>
    <h1 v-if="flag">请问撒多群多无群多群无</h1>
    <h1 v-show="!flag">的撒发放瓦打我法式风格</h1>
    <input v-model="inputText">


</div>

<script>
    //创建vue实例
    let app = new Vue({
        //挂载点 #app 找到id为app的页面元素
        el:"#app",
        //定义变量的区域 vdata
        data(){
            return{
                //键值对存在 键 变量名字 值
                title:"vue学习",
                text:"使用指令",
                items:[
                    {
                        id:1,
                        name:"张三",
                    },
                    {
                        id:2,
                        name:"李四",
                    },
                    {
                        id:3,
                        name:"王五",
                    },
                    {
                        id:4,
                        name:"赵六",
                    },
                ],
                flag:true,
                inputText:"",
            }
        },
        methods:{
            //定义方法 定义一个名字为fun01的方法
            fun01(){
                //log 向控制台打印输出
                console.log("方法01调用"),
                //弹窗
                alert("方法01调用")
            },
            fun02(){
                //log 向控制台打印输出
                console.log("方法01调用"),
                //弹窗
                alert(this.inputText)
            }
        },
    })
</script>
</body>
</html>
